<template>
  <div class="searchDialog">

    <!-- 搜索列表展示 -->
    <van-list v-if="realTimeKeywordList.length">
      <van-cell @click="clickHandler(real)" v-for="(real,index) in realTimeKeywordList" :key="index">
        <span style="float: left;">{{real}}</span>
        <van-icon name="arrow" />
      </van-cell>
    </van-list>

      <div v-else>
        <!-- 历史记录 -->
        <div v-if="kwdArr" class="searchHistory">
          <span class="searchHistoryText">历史记录</span>
          <van-icon @click="deleteHandler" class="searchDialogIcon" name="delete-o" />
          <van-tag 
            class="searchDialogTag"
            size="large"
            plain 
            color="#999" 
            text-color="#333"
            v-for="kwd in kwdArr"
            @click="clickHandler(kwd)"
          >{{kwd}}</van-tag>
        </div>
          <!-- 热门搜索 -->
        <div class="searchHot">
          <p class="searchHotText">热门搜索</p>
          <van-tag 
            class="searchDialogTag"
            size="large"
            plain 
            color="#999" 
            text-color="#333"
            v-for="(hot,index) in hotKeywordVOList"
            :key="index"
            @click="clickHandler(hot.keyword)"
          >{{hot.keyword}}</van-tag>
          <van-tag 
            class="searchDialogTag"
            size="large"
            plain 
            color="#999" 
            text-color="#333"
          >标签</van-tag>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import searchApi ,{ type HotKeywordVOListModel} from '@/api/search'
import { showNotify } from 'vant';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant'
const router = useRouter()
const emits = defineEmits<{
  (e:'getKeyword',val:string):void,
  (e:'getKwdArr',val:string[]):void,
  (e:'getRealKeyword',val:string):void
}>()
const props = defineProps<{
  realTimeKeywordList:[],
  keyword:string|number
}>()


// 存储热门搜索的列表数据
const hotKeywordVOList = ref<HotKeywordVOListModel>([])
// 存储默认搜索数据
const defaultSearch = ref('')
// 获取存储到localStorage的数据
const kwdArr = JSON.parse(localStorage.getItem('key') as string) || []
// 存储列表关键字
const realKeyword = ref('')
// console.log('kwdArr',kwdArr);

// 获取热门搜索列表
const getHotKeywordListData = async ()=>{
    try {
      let res = await searchApi.getHotKeywordList()
      // console.log(res.data);
      hotKeywordVOList.value = res.data.hotKeywordVOList
      // console.log('hot',hotKeywordVOList.value);
      

      // 更新默认搜索数据
      defaultSearch.value = res.data.defaultKeyword.keyword

      emits('getKeyword',defaultSearch.value)
      emits('getKwdArr',kwdArr)
        
    } catch (error) {
      showNotify({ type: 'danger', message: '获取热门搜索数据失败，请重试' });
      console.log(error); 
    }
}

  // 删除历史记录
  const deleteHandler = () => {
    showConfirmDialog({
      title: '提示',
      message:'确定要删除历史记录吗'
    })
      .then(() => {
        // on confirm
        localStorage.removeItem('key')
        router.go(0)
      })
    
  }

  // 点击列表更新keyword
  const clickHandler = (real:string) => {
    realKeyword.value = real
    emits('getRealKeyword',realKeyword.value)
    router.push(`/search/searchGoodsList?keyword=${real}`)
  }

  onMounted(()=>{
    getHotKeywordListData()
  })


</script>

<style scoped>
.searchDialog{
  height: 100%;
  background-color: #f4f4f4;
}
.searchHistory {
  padding-bottom: .88rem;
  background-color: #fff;
}
.searchHot{
  margin-top: .27rem;
  background-color: #fff;
  padding-bottom: .88rem;
}
.searchHistoryText , .searchHot{
  font-size: .4rem;
  padding-left: .43rem;
  color: #999;
}
.searchDialogIcon{
  margin-left: 6.93rem;
  font-size: .53rem;
}
.searchHot .searchDialogTag{
  margin-left: -0.05rem;
  margin-right: .43rem;
}
.searchDialogTag{
  margin-left: .35rem ;
  margin-top: .27rem;
}
.searchHotText {
  padding-top: .27rem;
}
</style>